<template>
	<view class="w-100">
		<!-- <view v-if="activeIndex === 0"> -->
		<!-- <view :style="{display:activeIndex === 0?'':'none'}"> -->
		<view v-show="activeIndex == 0">
			<scroll-view @scrolltolower="activeScrolltolower" class="scroll" scroll-y enable-back-to-top
				refresher-enabled :refresher-triggered="refreshA" @refresherrefresh="refreshA = true;"
				@scroll="scrollA">
				<page-a ref="pageA" @resetPage="activeResetPage" @openCalendar="openCalendar"
					@openStatePopup="openStatePopup" :page="activePage" @refreshState="refreshA = false"
					:refresh="refreshA" :isVisible="activeIndex === 0" :pageSize="activePageSize"
					:scrollTop="scrollTopA"></page-a>
			</scroll-view>
			<!-- wu-ui日期选择组件：https://ext.dcloud.net.cn/plugin?id=14157 -->
			<wu-calendar @cancel="cancelCalendar" @confirm="calendarConfirm" type="week" confirmColor="#fff"
				ref="calendar" :insert="false" mode="range" maskClick operationPosition="bottom" :fold="false"
				confirmFullDate color="#14cc60"></wu-calendar>
			<!-- 活动状态选择弹窗 -->
			<uni-popup ref="statePopup" type="bottom" background-color="#ffffff" borderRadius="30rpx 30rpx 0 0">
				<view class="slanted-rectangles br-30 pt-10 flex-dir-col ali-item-cen">
					<picker-view indicator-style="height: 50px;" :value="stateArr" @change="onStateChange"
						class="picker-view" style="height: 250rpx;">
						<picker-view-column>
							<view class="text-ali-c" style="line-height: 50px;" v-for="(item,index) in stateList"
								:key="index">
								{{item}}
							</view>
						</picker-view-column>
					</picker-view>
					<view class="w-100 flex-dir-row flex-x-spa ali-item-cen mt-20 text-ali-c fs-26">
						<view @click="cancelState" class="bac-col-fa  br-20 gender-btn">取消</view>
						<view @click="confirmState" class="bac-col-00b col-f br-20 gender-btn">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- <view v-if="activeIndex === 1"> -->
		<!-- <view :style="{display:activeIndex === 1?'':'none'}"> -->
		<view v-show="activeIndex == 1">
			<scroll-view @scrolltolower="circleScrolltolower" class="scroll" scroll-y enable-back-to-top
				refresher-enabled :refresher-triggered="refreshB" @refresherrefresh="refreshB = true;"
				@scroll="scrollB">
				<page-b ref="pageB" @resetPage="circleResetPage" :page="circlePage" @refreshState="refreshB = false"
					:refresh="refreshB" :isVisible="activeIndex === 1" :pageSize="circlePageSize"
					:scrollTop="scrollTopB"></page-b>
			</scroll-view>
		</view>
		<!-- <view v-if="activeIndex === 2"> -->
		<!-- <view :style="{display:activeIndex ===2?'':'none'}"> -->
		<view v-show="activeIndex == 2">
			<scroll-view class="scroll" scroll-y enable-back-to-top>
				<page-c ref="pageC" :isVisible="activeIndex === 2"></page-c>
			</scroll-view>
		</view>
		<!-- <view v-if="activeIndex === 3"> -->
		<!-- <view :style="{display:activeIndex === 3?'':'none'}"> -->
		<view v-show="activeIndex == 3">
			<scroll-view class="scroll" scroll-y enable-back-to-top refresher-enabled
				@refresherrefresh="refreshC = true;" :refresher-triggered="refreshC">
				<page-d ref="pageD" :isVisible="activeIndex === 3" @refreshState="refreshC = false"
					:refresh="refreshC"></page-d>
			</scroll-view>
		</view>
		<!-- <view v-if="activeIndex === 4"> -->
		<!-- <view :style="{display:activeIndex ===4?'':'none'}"> -->
		<view v-show="activeIndex == 4">
			<scroll-view class="scroll bac-col-fa" scroll-y enable-back-to-top refresher-enabled
				@refresherrefresh="refreshD = true;" :refresher-triggered="refreshD">
				<page-e ref="pageE" :isVisible="activeIndex === 4" @refreshState="refreshD = false"
					:refresh="refreshD"></page-e>
			</scroll-view>
		</view>
		<custom-tabbar :items="tabberList" @tabClick="tabClick"></custom-tabbar>
	</view>
</template>

<script>
	import PageA from './component/pageA.vue'
	import PageB from './component/pageB.vue'
	import pageC from './component/pageC.vue'
	import pageD from './component/pageD.vue'
	import pageE from './component/pageE.vue'
	export default {
		components: {
			PageA,
			PageB,
			pageC,
			pageD,
			pageE
		},
		data() {
			return {
				activeIndex: 0,
				scrollTopA: 0,
				scrollTopB: 0,
				tabberList: [{
					icon_select: '/static/tabber/hd.png',
					icon_not: '/static/tabber/hds.png',
					label: '活动'
				}, {
					icon_select: '/static/tabber/zx.png',
					icon_not: '/static/tabber/zxs.png',
					label: '圈子'
				}, {
					icon_select: '/static/tabber/fb.png',
					icon_not: '/static/tabber/fbs.png',
					label: '发布'
				}, {
					icon_select: '/static/tabber/tz.png',
					icon_not: '/static/tabber/tzs.png',
					label: '通知'
				}, {
					icon_select: '/static/tabber/wd.png',
					icon_not: '/static/tabber/wds.png',
					label: '我的'
				}],
				activePage: 0, //活动分页页码
				activePageSize: 10, //活动分页每页数量
				circlePage: 0, //圈子分页页码
				circlePageSize: 10, //圈子分页每页数量
				refreshA: false,
				refreshB: false,
				refreshC: false,
				refreshD: false,
				stateArr: [0],
				stateIndex: 0,
				stateList: ['全部', '报名中', '进行中', '已结束'],

			}
		},
		onLoad(options) {
			this.uniIdRedirectUrl = decodeURIComponent(options.uniIdRedirectUrl)
		},
		methods: {
			tabClick(e) {
				this.activeIndex = e;
			},
			//滚动触发
			scrollA(e) {
				this.scrollTopA = parseInt(e.detail.scrollTop); // 滚动条距离顶部高度
			},
			scrollB(e) {
				this.scrollTopB = parseInt(e.detail.scrollTop); // 滚动条距离顶部高度
			},
			activeScrolltolower(e) {
				this.activePage++;
			},
			activeResetPage(e) {
				this.activePage = 0;
			},
			circleScrolltolower(e) {
				this.circlePage++;
			},
			circleResetPage(e) {
				this.circlePage = 0;
			},
			// 打开日历
			openCalendar() {
				this.$refs.calendar.open();
			},
			// 日历确认
			calendarConfirm(e) {
				this.$refs.pageA.calendarConfirm(e)
			},
			// 重置选择
			cancelCalendar() {
				this.$refs.pageA.calendarCancel()
			},
			// 打开活动状态选择弹窗
			openStatePopup() {
				this.$refs.statePopup.open()
			},
			// 活动状态选择弹窗取消
			cancelState() {
				this.$refs.statePopup.close()
			},
			// 活动状态选择弹窗确定
			confirmState() {
				this.$refs.pageA.switchState(this.stateIndex)
				this.$refs.statePopup.close()
			},
			// 更新状态索引
			onStateChange(e) {
				this.stateIndex = e.detail.value[0];
			},
		}
	}
</script>

<style lang="scss">
	.scroll {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
	}

	.slanted-rectangles {
		position: relative;
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		bottom: -20rpx;
		z-index: 2;
		padding-bottom: 50rpx !important;
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom)) !important;
	}

	.slanted-rectangles::before {
		content: '';
		position: absolute;
		top: -46rpx;
		z-index: -1;
		left: 0;
		width: 100%;
		height: 50%;
		background-color: white;
		transform: skewY(3deg);
		border-radius: 40rpx 40rpx 0 0;
	}

	.gender-btn {
		width: 270rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 350rpx;
		margin-top: 20rpx;
	}
</style>